<script setup lang="ts">
import { inject, provide, reactive } from 'vue';
import PositionType from '@/views/task/components/PositionType.vue';
import ServiceTypePopup from './ServiceTypePopup.vue'
import {myStore} from '@/store/my'
import { Toast } from 'vant';
import { personPositionAPI } from '@/api/my'

const store = myStore()

const { closeChange } = inject('popup')
const state = reactive({
    showPositionType: false,
    positionValue: '',
    showServiceType: false,
    serviceValue: '',
    showPriceType: false,
    priceValue: '',
})
// 回显判断 原来是否有值
if (Object.keys(store.state.resumeInfo).length !== 0) {
    state.positionValue = store.state.resumeInfo.position_name
    state.serviceValue = store.state.resumeInfo.service_mode
    state.priceValue = store.state.resumeInfo.service_price
}
// 关闭职位类型 弹框
const closePositionType = (name: string) => {
    if (name) {
        state.positionValue = name
    }
    state.showPositionType = false
}
// 关闭服务类型弹框
const closeShowServiceType = (val: any) => {
    if (val) {
        state.serviceValue = val
    }
    state.showServiceType = false
}
// 取消薪资范围的下拉框 
const onSalaryCancel = () => {
    state.priceValue = ''
    state.showPriceType = false
}
// 选择薪资范围
const priceSelect = (val: Object) => {
    state.priceValue = val.name
}
// 保存按钮
const submit = async() => {
    if (!state.positionValue) {
        Toast('请选择职位类型')
    }
    if (!state.serviceValue) {
        Toast('请选择服务类型')
    }
    if (!state.priceValue) {
        Toast('请选择服务价格')
    }
    const res = await personPositionAPI({
        "position_name": state.positionValue, 
        "service_mode": state.serviceValue, 
        "service_price": state.priceValue 
    })
    if (res) {
        closeChange()
        Toast('保存成功')
    }else{
        Toast('保存失败')
    }
}
provide('closePositionType',closePositionType)
provide('closeShowServiceType',closeShowServiceType)
</script>
<template>
    <van-nav-bar
        title="求职意愿"
        left-arrow
        @click-left="closeChange"
    />
    <div class="position-list">
        <div class="user-item">
            <h5>职位类型</h5>
            <van-field
                v-model="state.positionValue"
                placeholder="请选择您的职位类型"
                is-link
                readonly
                @click="state.showPositionType=true"
            />
        </div>
        <div class="user-item">
            <h5>服务类型</h5>
            <van-field
                v-model="state.serviceValue"
                placeholder="请选择您的服务类型"
                is-link
                readonly
                @click="state.showServiceType=true"
            />
        </div>
        <div class="user-item">
            <h5>服务价格</h5>
            <van-field
                v-model="state.priceValue"
                placeholder="请选择您的服务价格"
                is-link
                readonly
                @click="state.showPriceType=true"
            />
            <van-action-sheet
                v-model:show="state.showPriceType"
                :actions="store.state.salaryScope"
                cancel-text="取消"
                close-on-click-action
                @cancel="onSalaryCancel"
                @select="priceSelect"
            />
        </div>
        <button class="wy-submit" @click="submit">保存</button>

        <!-- 切换职位 弹窗 -->
        <van-popup 
            v-model:show="state.showPositionType" 
            position="top"
            duration="0"
            :style="{ height: '100%', width: '100%' }" 
        >
            <PositionType />
        </van-popup>
        <!-- 切换服务 弹窗 -->
        <van-popup 
            v-model:show="state.showServiceType" 
            position="top"
            duration="0"
            :style="{ height: '100%', width: '100%' }" 
        >
            <ServiceTypePopup />
        </van-popup>
    </div>
</template>


<style scoped>
  .position-list{
    margin: 1.52rem 0.67rem 0;
  }
</style>